<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>getter对数据的加工处理</title>
  <link rel="stylesheet" href="../css/base.css">
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
  <script src="../js/vuex.js"></script>
</head>
<!-- 
  Getter用于对store中的数据进行加工处理形成新的数据
    1.getter可以对Store中的已有的数据加工处理之后形成新的数据，类似于vue中的computed的计算属性
    2.Store中的数据发生变化,Getter的数据也会跟着变化

  使用getter中方法:
    获取getters中方法，可以通过this.$store.getters.showcount
    也可以通过
      import {mapGetters} from "vuex"
      computed:{
        ...mapGetters(["showcount"])
      }
  
  注意:Getter不会修改state中的数据
 -->

<body>
  <div id="app">
    <h1>{{count}}</h1>
    <h1 style="color: red;">{{this.$store.getters.showcount}}</h1>
    <h1 style="color: green;">{{showcount}}</h1>
  </div>
</body>
<script>
  "use strict";
  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {},
    actions: {},
    getters: {
      showcount: state => {
        return `当前是最新的数据了,${state.count+10}`;
      }
    }
  });

  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {},
    computed: {
      ...Vuex.mapState(["count"]),
      ...Vuex.mapGetters(["showcount"])
    },
    store
  });
</script>

</html>